<template>
   <div class="box">
    <header class="header">
        <slot name="header"></slot>
    </header>
    <main class="main">
    <div v-for="(item,index) in data">
        <slot :data="item" :index="index"></slot>
    
    </div>
    </main>
    <footer class="footer">
        <slot name="footer"></slot>
    </footer>
   </div>
</template>

<script setup lang='ts'>
import {ref ,reactive} from 'vue'
type names={
    name:string,
    age:number
}
const data = reactive<names[]>([{
    name:"xxx被slot了",
    age:12
},{
    name:"xxx2被slot了",
    age:15
},{
    name:"xxx3被slot了",
    age:17
},{
    name:"xxx4被slot了",
    age:18
},])
</script>

<style lang="less" scoped>

.header{
    height:200px;
    background:red;
    color:#fff;
}
.main{
    height:300px;
    background:brown;
    color:#fff;
}
.footer{
    height:200px;
    background:rgb(123, 207, 90);
    color:#fff;
}
</style>